<template>
    <div class="file-move">
        <div class="file" id="upload-components">
            <slot></slot>
        </div>
        <ul class="move-list">
            <template  v-for="(item,index) in moveList">
            <li v-if="index == 0" :key="index"><edit-button @click="toDelete(index)">删除</edit-button><edit-button @click="toDown(index)">下移</edit-button></li>
            <li v-else :key="index"><edit-button @click="toDelete(index)">删除</edit-button><edit-button @click="toUp(index)">上移</edit-button></li>
            </template>
        </ul>
    </div>
</template>
<script>
    export default {
        name:"FileMove",
        props:["value"],
        data(){
            return{
            }
        },
        computed:{
            moveList:{
                get(val){
                    return this.value
                },
                set(val){
                    this.$emit("input", val)
                }
            }
        },
        created() {

        },
        mounted() {

        },
      watch:{
        moveList(){
          if(document.querySelector("#upload-components")){
            document.querySelector(".move-list").style.marginTop = (document.querySelector(".el-upload-list").offsetTop-3)+"px"
          }
        }
      },
      methods:{
            toUp(index) {
                if(index === 0) {
                    return
                }
                //在上一项插入该项
                this.moveList.splice(index - 1, 0, (this.moveList[index]))
                //删除后一项
                this.moveList.splice(index + 1, 1)
                this.$emit("input", this.moveList)
            },
            toDown(index) {
                if (index === (this.moveList.length-1)) {
                    return
                }
                // 在下一项插入该项
                this.moveList.splice(index + 2, 0, (this.moveList[index]))
                // 删除前一项
                this.moveList.splice(index, 1)
                this.$emit("input", this.moveList)
            },
            toDelete(index){
                this.moveList.splice(index, 1)
                this.$emit("input", this.moveList)
            }
        }
    }
</script>
<style lang="scss">
    .file-move{
        width: 100%;
        display: flex;
        .left{
            flex: 1;
        }
        .move-list{
            min-width: 67px;
            .el-button--mini, .el-button--small {
                font-size: 12px;
            }
            li{
                line-height: 25px;
                margin-top: 2px
            }
        }
        .el-upload-list{
            width: 235px;
        }
    }
</style>
